<script>
import { dictMixin } from '@/mixin/dict'

export default {
  name: 'OperateCarbonEmissionDataActivityEdit',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {},
      detailData: {}
    }
  },
  watch: {
    popData: {
      async handler(data) {
        this.formData = data
        const detailRes = await this.$api.carbonEmissionDataActivity.detail(data.activityCarbonEmissionId, data.solidifyDate)
        this.detailData = detailRes.data
        console.log(this.detailData)
      },
      deep: true,
      immediate: true
    },
    confirm() {
      this.submit(this.detailData.otherList)
    }
  },
  methods: {
    submit(data) {
      if (data != null && data.length > 0) {
        this.$api.carbonEmissionDataActivity.batchUpdate(data).then(response => {
          this.$message.success(`操作成功！`)
          this.$emit('onFinish', 'data-activity-edit')
        })
      } else {
        this.$emit('onFinish', 'data-activity-edit')
      }
    }
  }
}
</script>

<template>
  <div>
    <el-form>
      <el-form-item label="活动名称">
        <el-select disabled v-model="formData.id">
          <el-option :value="formData.id" :label="formData.activityCarbonEmissionName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据时间">{{ formData.solidifyDate }}</el-form-item>
      <el-form-item label="所属项目">
        <el-select disabled v-model="formData.sceneProjectId">
          <el-option :value="formData.sceneProjectId" :label="formData.projectName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属场景">
        <el-select disabled v-model="formData.sceneEdificeId">
          <el-option :value="formData.sceneEdificeId" :label="formData.sceneInfoName"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <h3>关联设备：</h3>
      <el-table :data="detailData.deviceList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景">
        </el-table-column>
        <el-table-column prop="deviceCode" label="设备编号"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="energyTypeName" label="能源种类"></el-table-column>
        <el-table-column prop="staticsTypeName" label="统计类型"></el-table-column>
        <el-table-column prop="meterValue" label="计量值"></el-table-column>
        <el-table-column prop="energyTypeUnit" label="单位"></el-table-column>
        <el-table-column prop="carbonEmission" label="碳排放量（kgCO2）"></el-table-column>
      </el-table>
    </div>
    <div v-if="detailData.activityType === '2'">
      <h3>关联绿化：</h3>
      <el-table :data="detailData.relatedGreeningList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景"></el-table-column>
        <el-table-column prop="typeName" label="绿化名称"></el-table-column>
        <el-table-column prop="carbonSinkIdName" label="种植方式"></el-table-column>
        <el-table-column prop="area" label="面积（㎡）"></el-table-column>
        <el-table-column prop="carbonEmission" label="碳汇量（kgCO2）"></el-table-column>
      </el-table>
    </div>
    <div>
      <h3>外购碳汇：</h3>
      <el-table :data="detailData.dataFillList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景"></el-table-column>
        <el-table-column prop="outsourcedCarbonSinks" label="碳汇量（kgCO2）"></el-table-column>
      </el-table>
    </div>
    <div>
      <h3>其它：</h3>
      <el-table :data="detailData.otherList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景">
        </el-table-column>
        <el-table-column prop="energyTypeName" label="能源种类"></el-table-column>
        <el-table-column label="用值">
          <template #default="{row}">
            <el-input-number v-model="row.usageValue" :min="0" size="mini"/>
          </template>
        </el-table-column>
        <el-table-column prop="energyTypeUnit" label="单位"></el-table-column>
        <el-table-column prop="carbonEmission" label="碳排放量（kgCO2）"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
